
if (top.biIndex==undefined) top.biIndex = 1000;


export default{
    name:'dropdown',
    mounted(el,binding,vnode){
        
        if (binding.value===false) return;
        var app = binding.instance;
            
        let show =  false;

        let on = 'click';
        let body = undefined;
        let position_body = undefined;
        let props = vnode.props??{};

        let width = '';

        if (props['dropdown-width']==undefined || props['dropdown-width']==''){
            width = 150;
        }else{
            width = props['dropdown-width'];
        }




        
        let height = props['dropdown-height']??undefined;

        let x='auto';
        let y='auto';

        let left = 0;
        let vertical  = 10;

        if (props['dropdown-on']!=undefined){
            on = props['dropdown-on'];
        }


        if (props['dropdown-body']!=undefined){
            let _body = props['dropdown-body'];

            if (app.$refs[_body]!=undefined){
                body =app.$refs[_body];
            }
        }

        if (props['dropdown-position']!=undefined){
            let _position = props['dropdown-position'];
            if (app.$refs[_position]!=undefined){
                position_body =app.$refs[_position];
            }
        }

        if (props['dropdown-right']!=undefined){
            x = 'right';
        }

         
        if (props['dropdown-center']!=undefined){
            x = 'center';
        }

        //LEFT优先
        if (props['dropdown-left']!=undefined){
            x = 'left';
        }

        
        if (props['dropdown-bottom']!=undefined){
            y = 'bottom';
        }
        //TOP 优先
        if (props['dropdown-top']!=undefined){
            y = 'top';
        }


        if (props['dropdown-vertical']!=undefined){
            vertical = props['dropdown-vertical'];
        }


        if (body!=undefined){
          

            if (!body.classList.contains('dropdown-box')){
                body.classList.add('dropdown-box');
            }

            if (!body.classList.contains('dropdown-hide')){
                body.classList.add('dropdown-hide');
            }

            if (body.classList.contains('dropdown-show')){
                body.classList.remove('dropdown-show');
            }

            if (width!=undefined && width!='auto'){
                body.style.width = width +'px';
            }

            if (height!=undefined){
                body.style.height = height +'px';
            }

            let hide_timer = 0;

            if (position_body==undefined) position_body = el;

                 
            el.addEventListener(on, (e) => {

                e.stopPropagation();
                if (body.parentNode.tagName!='BODY'){
                    top.document.body.appendChild(body);
                }
                
                //计算index
                top.biIndex  +=10;
                body.style.zIndex = top.biIndex;

                let pos = position_body.getBoundingClientRect();

                let p = currentFrameAbsolutePosition();
                //let p= {x:0,y:0};

                let pos_left = pos.left + p.x;
                let pos_top = pos.top + p.y;
                
                let pos_width = position_body.offsetWidth;
                let pos_height = position_body.offsetHeight;
                
                body.classList.remove('dropdown-hide');
                body.classList.remove('dropdown-tohide');
                 
                let _show_x = ''; 
                let _show_y = ''; 
                if (width=='auto'){
                    body.style.width  =  pos_width +'px';
                    _show_x = 'left';
                }

                if (width== 'self'){
                    body.style.width  =  body.offsetWidth +'px';
                    pos_width =  body.offsetWidth;
                    _show_x = 'left';
                }


                if (props['dropdown-min-width']!=undefined){
                    
                    let min_width = parseInt(props['dropdown-min-width']);
                    body.style.minWidth = min_width +'px';
                }

                if (props['dropdown-max-width']!=undefined){
                    let max_width = parseInt(props['dropdown-max-width']);
                    body.style.maxWidth = max_width +'px';
                }


                let body_width  = body.offsetWidth;
                let body_height = body.offsetHeight;
                
                if (x=='auto'){
                    _show_x = 'left';
                }else{
                    _show_x = x;
                }

                if (_show_x == 'left'){
                    if (pos_left+body_width>top.document.body.clientWidth){
                        _show_x = 'right';
                    }
                }

                if (_show_x == 'right'){
                    if (pos_left+pos_width - body_width <0)  _show_x = 'left';
                }
                
                if (y=='auto'){
                    if (pos_top+pos_height+body_height+vertical>top.document.body.clientHeight){
                        _show_y = 'bottom';
                    }else{
                        _show_y =  'top';
                    } 
                }else{
                    _show_y = y;
                }
                 

                clearTimeout(hide_timer);
                setTimeout(()=>{
             

                    switch(_show_x){
                        case 'left':
                            body.style.left = pos_left+'px';
                        break;
                        case 'center':
                            body.style.left =( pos_left +(pos_width-body_width)/2)+'px';
                        break;
                        case 'right':
                            body.style.left = (pos_left+pos_width-body_width)+'px';
                        break;
                    }
                    

                    if (_show_y=='top'){
                        body.style.top = (pos_top+pos_height+vertical)+'px';
                                             
                    }else{
                        body.style.top = (pos_top-body_height - vertical)+'px';
                    }

                  
                    body.classList.add('dropdown-show');

                },50);

            
                var dom = document.createElement('div');
                dom.className = 'dropdown-mask';
                dom.style.zIndex = top.biIndex-1;

                top.document.body.appendChild(dom);
            
                let hide = function(){
                    body.classList.add('dropdown-tohide');
                    
                    body.classList.remove('dropdown-show');
                    
                    dom.remove();
                    
                    hide_timer =  setTimeout(()=>{
                        body.classList.remove('dropdown-tohide');
                        body.classList.add('dropdown-hide');
                    },300);
                }
                
                body.hide = ()=>{
                    hide();
                }

                body.onclick = (e) => {
                    hide();
                }

                dom.onclick = (e) => {
                    hide();
                    e.stopPropagation();
                };
                
             
            });
             
        }
    }
}


function currentFrameAbsolutePosition() {
    let currentWindow = window;
   
    let currentParentWindow;
    let positions = [];
    let rect;
  
    while (currentWindow !== window.top) {
      currentParentWindow = currentWindow.parent;
     
      for (let idx = 0; idx < currentParentWindow.frames.length; idx++)
        if (currentParentWindow.frames[idx] === currentWindow) {
          for (let frameElement of currentParentWindow.document.getElementsByTagName('iframe')) {
            if (frameElement.contentWindow === currentWindow) {
              rect = frameElement.getBoundingClientRect();
              positions.push({x: rect.x, y: rect.y});
            }
          }
          currentWindow = currentParentWindow;
          break;
        }
    }
    return positions.reduce((accumulator, currentValue) => {
      return {
        x: accumulator.x + currentValue.x,
        y: accumulator.y + currentValue.y
      };
    }, { x: 0, y: 0 });
  }